<template>
	<view>
		<u-swiper height="750" :list="item.images" :video="item.video" img-mode="aspectFit"></u-swiper>
		<view class="info">
			<view class="order-status">
				<view class="">
					<view class="title-1">
						{{item.start[0].name}}到
						{{item.end[0].name}}
					</view>
					<view class="desc">
						该行程正在接单中…
					</view>
				</view>
				<view class="price">
					¥{{item.price}}
				</view>
			</view>
			<view class="address-list">
				<view class="date">
					{{item.start_date}}
					{{item.start_time}}
					(星期{{item.create_time | week}})
				</view>
				<view class="flex-between py-20">
					<view class="list" @click="openMap">
						<view class="item">
							<image class="icon-36" src="../../static/icon_address.png" mode="widthFix"></image>
							<view class="name">
								{{item.start[0].name}}
							</view>
							<!-- <image class="icon-32" src="../../static/btn_see.png" mode="widthFix"></image> -->
						</view>
						<view class="item" v-for="(_item,i) in item.way" :key="i">
							<view class="point"></view>
							<view class="name">
								{{_item.name}}
							</view>
							<!-- <image class="icon-32" src="../../static/btn_see.png" mode="widthFix"></image> -->
						</view>
						<view class="item">
							<image class="icon-36" src="../../static/icon_right.png" mode="widthFix"></image>
							<view class="name">
								{{item.end[0].name}}
							</view>
							<!-- <image class="icon-32" src="../../static/btn_see.png" mode="widthFix"></image> -->
						</view>
					</view>
					<view class="" @click="openMap">
						<n-small-map :location_list="location_list"></n-small-map>
<!-- 						<map class="map" :markers="markers" :include-points="includePoints" :longitude="longitude"
							:latitude="latitude" :polyline="polyline"></map> -->
					</view>
				</view>
		
				<!-- <view class="more" @click="openMap">
					查看行程地图 <u-icon name="arrow-right" color="#519D76"></u-icon>
				</view> -->
			</view>
			<n-car :item="item"></n-car>
			<view class="car-info" v-if="item.car">
				<view class="item">
					<view class="title">
						座位
					</view>
					<view class="text">
						{{item.num || ''}}/{{item.seat || ''}}座位
					</view>
				</view>
				<view class="item item-1">
					<view class="title">
						备注
					</view>
					<view class="text">
						{{item.remarks || '无'}}
					</view>
				</view>
				<view class="item item-1" v-if="item.service">
					<view class="title">
						服务包含
					</view>
					<view class="text">
						{{item.service || '无'}}
					</view>
				</view>
			</view>
		</view>
		<view class="comment">
			<view class="user-info">
				<u-avatar size="72" :src="item.user.avatar"></u-avatar>
				<view class="name">
					{{item.user.nickname}}
				</view>
				<image class="icon-32" src="../../static/btn_like.png" mode="widthFix"></image>
				<view class="text">
					{{item.user.like_num}}
				</view>
				<image class="icon-32" src="../../static/btn_no_like.png" mode="widthFix"></image>
				<view class="text">
					{{item.user.nolike_num}}
				</view>
			</view>
			<view class="title-1">
				别人对TA的评论
			</view>
			<view class="badge">
				<view class="item" v-for="item in tagList" :key="item.id">
					{{item.name}} +{{item.num}}
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item,i) in 3" :key="i">
					<u-avatar size="72" src="../../static/icon-qun.png"></u-avatar>
					<view class="pl-20 flex-1">
						<view class="name">郭子山</view>
						<view class="desc">车主很热情，也很准时，服务态度很好</view>
					</view>
				</view>
				<u-loadmore :status="status" ></u-loadmore>
			</view>
		</view>
		<!-- 底部操作栏 -->
		<view class="tabbar-bottom">
			<view class="menu">
				<view class="item">
					<image class="icon-44" src="../../static/btn_share.png" mode="widthFix"></image>
					<view class="title">
						分享行程
					</view>
				</view>
				<view class="item">
					<image class="icon-44" src="../../static/btn_mobile.png" mode="widthFix"></image>
					<view class="title">
						拨打电话
					</view>
				</view>
				<view class="item">
					<image class="icon-44" src="../../static/btn_chat.png" mode="widthFix"></image>
					<view class="title">
						加入群聊
					</view>
				</view>
				<view class="item">
					<image class="icon-44" src="../../static/btn_collect.png" mode="widthFix"></image>
					<view class="title">
						收藏
					</view>
				</view>
			</view>
			<view class="btn" @click="submit">
				立即预约
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				item: '',
				includePoints: [],
				polyline: [{
					points: [],
					color: "#519D76",
					width: 3,
					arrowLine: true,
				}],
				location_list: [],
				longitude: '',
				latitude: '',
				markers: [],
				tagList:[],
				page:1,
				commentList:[],
				status: 'loading',	//loadmore loading / nomore
			};
		},
		onLoad(e) {
			this.id = e.id
			this.getJourneyDetail()
			this.itineraryTags()
			this.itineraryCommentList()
		},
		onReachBottom() {
			if (this.status === 'nomore') {
				return
			}
			this.page++
			this.status = 'loading'
			this.itineraryCommentList()
		},
		methods: {
			itineraryTags(){
				this.$api.itineraryTags({
					itinerary_id:this.id
				}).then(res=>{
					if(res.code==1){
						this.tagList = res.data
					}
				})
			},
			itineraryCommentList(){
				this.$api.itineraryCommentList({
					itinerary_id:this.id,
					page:this.page
				}).then(res=>{
					if(res.code==1){
						if (this.page === res.data.last_page || res.data.total == 0) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
						this.commentList.push(...res.data.data)
					}
				})
			},
			getMarkers() {
				let markers = [{
						id: 1,
						latitude: this.location_list[0].latitude,
						longitude: this.location_list[0].longitude,
						iconPath: require('@/static/icon_start.png')
					},
					{
						id: 2,
						latitude: this.location_list[this.location_list.length - 1].latitude,
						longitude: this.location_list[this.location_list.length - 1].longitude,
						iconPath: require('@/static/icon_end.png')
					}
				]
				this.markers = markers
			},
			getPolyline() {
				let points = []
				this.latitude = this.location_list[0].latitude
				this.longitude = this.location_list[0].longitude
				this.location_list.forEach((item, i) => {
					points.push({
						latitude: item.latitude,
						longitude: item.longitude,
					})

				})
				this.polyline[0].points = points
				this.includePoints = points
				console.log(this.polyline)
				console.log(this.includePoints)
			},
			getJourneyDetail() {
				this.$api.journeyDetail({
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.item = res.data
						let location_list = []
						location_list.unshift(...this.item.start)
						location_list.push(...this.item.way)
						location_list.push(...this.item.end)
						this.location_list = location_list
						this.getPolyline()
						this.getMarkers()
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			submit() {
				uni.navigateTo({
					url: './payment?id=' + this.id
				})
			},
			openMap() {
				let location_list = []
				location_list.unshift(...this.item.start)
				location_list.push(...this.item.way)
				location_list.push(...this.item.end)
				uni.setStorageSync('location_list', location_list)
				uni.navigateTo({
					url: '/pages_release/map/map'
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.map {
		width: 320upx;
		height: 400upx;
		border-radius: 16upx;
		overflow: hidden;
	}
	
	.address-list {
		padding: 30upx 0;
		border-bottom: 1upx solid #EFEFEF;
		line-height: 1;
		margin: 24upx 0;
		border-radius: 16upx;
		background: #fff;
	
		.date {
			font-size: 26upx;
			color: #FF8E1C;
		}
	
		.list {
			border-left: 1upx solid #CCCCCC;
	
			.item {
				@include flex-between;
	
				.name {
					flex: 1;
					padding-left: 30upx;
					font-size: 24upx;
					color: #999999;
					padding-right: 20upx;
				}
	
				.icon-36 {
					margin-left: -18upx;
				}
	
				.point {
					width: 12upx;
					height: 12upx;
					margin-right: 12upx;
					background: #CCCCCC;
					border-radius: 50%;
					margin-left: -6upx;
				}
			}
	
			.item:not(:first-child) {
				margin-top: 40upx
			}
	
			.item:first-child,
			.item:last-child {
				.name {
					font-size: 26upx;
					font-weight: 500;
					color: #333333;
				}
	
				margin-bottom: 0;
			}
		}
	
		.more {
			font-size: 26upx;
			color: #519D76;
			text-align: center;
			padding-top: 30upx;
			margin-top: 30upx;
			line-height: 1;
			border-top: 1upx solid #EFEFEF;
		}
	
		.map {
			width: 320upx;
			height: 400upx;
			border-radius: 16upx;
			overflow: hidden;
		}
	}

	.info {
		padding: 0 30upx;
		background: #fff;

		.order-status {
			@include flex-between;
			padding: 30upx 0;
			border-bottom: 1upx solid #EFEFEF;
			line-height: 1;

			.title-1 {
				font-size: 34upx;
				font-weight: bold;
				color: #333333;
			}

			.desc {
				font-size: 26upx;
				color: #666666;
				margin-top: 20upx;
			}

			.price {
				font-size: 42upx;
				font-weight: bold;
				color: #328B5A;
			}
		}

		

		.car-info {
			padding: 10upx 0;
		
			.item {
				@include flex-between;
				margin: 20upx 0;
				.title {
					font-size: 30upx;
					color: #999999;
					white-space: nowrap;
				}
		
				.text {
					font-size: 30upx;
					color: #333333;
					padding-left: 30upx;
				}
			}
			.item-1{
				align-items: flex-start;
			}
		}

	}

	.comment {
		margin-top: 16upx;
		padding: 40upx 30upx;
		background: #fff;

		.user-info {
			@include flex-between;

			.name {
				font-size: 32upx;
				font-weight: 500;
				color: #333333;
				margin-left: 20upx;
				flex: 1;
			}

			.text {
				font-size: 18upx;
				color: #999999;
				margin-left: 8upx;
			}

			image {
				margin-left: 60upx;
			}
		}

		.title-1 {
			font-size: 30upx;
			font-weight: 500;
			color: #333333;
			margin: 50upx 0 30upx;
		}

		.badge {
			@include flex;
			flex-wrap: wrap;
			margin-bottom: 20upx;

			.item {
				text-align: center;
				min-width: 205upx;
				line-height: 48upx;
				background: #EDF5F1;
				border-radius: 24upx;
				font-size: 26upx;
				color: #519D76;
				margin-right: 20upx;
				margin-bottom: 20upx;
			}
		}

		.list {
			padding-bottom: 100upx;

			.item {
				display: flex;
				border-bottom: 1upx solid #EFEFEF;
				padding-bottom: 40upx;
				margin-bottom: 40upx;

				.name {
					font-size: 30upx;
					color: #7B7B7B;
				}

				.desc {
					font-size: 30upx;
					line-height: 45upx;
					color: #333333;
				}
			}
		}
	}

	.tabbar-bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		@include flex;
		padding: 20upx 30upx;
		background: #fff;
		border-top: 1upx solid #EFEFEF;

		.menu {
			@include flex-between;
			padding-right: 40upx;
			text-align: center;
			flex: 1;

			.title {
				font-size: 24upx;
				color: #999999;
			}
		}

		.btn {
			font-size: 30upx;
			font-weight: 500;
			color: #FFFFFF;
			width: 243upx;
			line-height: 80upx;
			background: #519D76;
			border-radius: 40upx;
			text-align: center;
		}
	}
</style>
